import type { FC } from "react"
import { Link, Outlet } from "react-router-dom"
import { Routes } from "@/shared/consts"
import { LayoutGrid, PawPrint, UserRound } from "lucide-react"
import { Button } from "@/shared/ui/button"

const routes = [
  {
    route: Routes.Dogs,
    Icon: PawPrint,
    text: "Собаки",
  },
  {
    route: Routes.MyDog,
    Icon: LayoutGrid,
    text: "Моя собака",
  },
  {
    route: Routes.Profile,
    Icon: UserRound,
    text: "Профиль",
  },
]
const MenuLayout: FC = () => {
  return (
    <div className="pb-[118px] relative flex-1">
      <Outlet />
      <div className="fixed bg-white max-w-[600px] mx-auto pt-2 pb-9 bottom-0 left-0 right-0 flex justify-evenly">
        {routes.map(({ Icon, text, route }) => (
          <Link to={route} key={text}>
            <Button variant="nav" size="nav">
              <Icon className="h-7" />
              {text}
            </Button>
          </Link>
        ))}
      </div>
    </div>
  )
}
export default MenuLayout
